'use strict';

const e = React.createElement;

class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {
      return 'You liked this.';
    }

    return e(
      'button',
      { onClick: () => this.setState({ liked: true }) },
      'Like'
    );
  }
}

// const domContainer = document.querySelector('body');
// ReactDOM.render(e(LikeButton), domContainer);

  class PlanRow extends React.Component {
    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
      }

      handleChange(e){
           var t=event.target.name=="standard" ? 0:1;
            this.props.plan.status[t]=!this.props.plan.status[t];
            this.props.onchange(this.props.index,this.props.plan.status);
      }

    render() {
      const p = this.props.plan;
      if(!p.status )  p.status=[false,false];
      const status = p.status;
  
      return (
        <tr>
          <td>{p.name}</td>
          <td class="choose"><a class={status[0] ?"open":"close" } name="standard" onClick={this.handleChange} > </a></td>
          <td class="choose"><a class={status[1] ?"open":"close" } name="premlum" onClick={this.handleChange}> </a></td>
        </tr>
      );
    }
  }
  
  class PlanTable extends React.Component {
    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
      }
      
      handleChange(i,status){
            this.props.onStatusChange(i,status);
      }

    render() {
      const rows =[]; let i=0;
       this.props.plans.forEach((plan)=>{
            rows.push(<PlanRow 
                plan={plan}
                index={i++}
                onchange={this.handleChange}
            />);
       });
  
      return (
        <table border="0" >
          <thead>
            <tr>
              <th width="300px"> </th>
              <th><b>Standard Plan</b></th>
              <th><b>Premium Plan</b></th>
            </tr>
          </thead>
          <tbody>{rows}</tbody>
        </table>
      );
    }
  }
  
  class MoneryBar extends React.Component {
    constructor(props) {
      super(props);
      this.handleChange = this.handleChange.bind(this);
    }
    
    handleChange(e) {
      this.props.onChange(e.target.value);
    }
    
    
    render() {
      return (
        <form>
            <table><tr><th width="300px"> </th><th>
          <lable><input
            type="radio"
            name="type"
            value={this.props.standard}
            onChange={this.handleChange}
          />HK${this.props.standard}<i>/Month</i></lable>
          </th>
          <th>
        <lable>
        <input
            type="radio"
            name="type"
            value={this.props.premlum}
            onChange={this.handleChange}
          />HK${this.props.premlum}<i>/Month</i></lable>
         </th></tr> </table>
        </form>
      );
    }
  }
  
  class ChoseablePlanTable extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        standard:0,
        premlum:0
      };
      
      this.handleStatusChange = this.handleStatusChange.bind(this);
      this.handleTypeChange = this.handleTypeChange.bind(this);
    }
  
    handleStatusChange(index,newStatus) {
        var p=this.props.plans;
        p[index].status=newStatus;
        var moneySum=[0,0];
        for(var i=0;i<p.length;i++){
                if(!p[i].status) continue;
                if(p[i].status[0])    moneySum[0]+=p[i].money_standard;
                if(p[i].status[1])    moneySum[1]+=p[i].money_premium;
        }
      this.setState({
            standard:moneySum[0],
            premlum:moneySum[1]
      });
    }

    handleTypeChange(type){

    }
    
    render() {
      return (
        <div>
            <h2>Choose a plan</h2>
          <PlanTable
            plans={this.props.plans}
            onStatusChange={this.handleStatusChange}
          />
          <MoneryBar
            standard={this.state.standard}
            premlum={this.state.premlum}
            onChange={this.handleTypeChange}
          />
        </div>
      );
    }
  }
  setTimeout(() => {
    $.getJSON("http://localhost:8000/get-all-plans",function(data){
        $('.loading').hide().shCircleLoader('destroy');
          if(data.status!="ok")  return alert(data.msg);
          
          console.log(data.result)
          ReactDOM.render(
            <ChoseablePlanTable plans={data.result} />,
            document.getElementById('container')
          );
      })    
  }, 2000);
    $('.loading').shCircleLoader({ 
        namespace: 'myns',
        color: 'transparent',
        dotsRadius: 15    
});